<template>
  <div
    class="mar-top-20"
    id="linechart"
    ref="linechart"
    style="width: 100%; height: 100%"
  ></div>
</template>
<script>
export default {
  data() {
    return {
      options: {},
    };
  },
  mounted() {
    this.linechart();
  },
  props: {
    curveData: {
      type: Array,
      default: () => [],
    },
  },

  watch: {
    curveData: {
      handler(newData) {
        if (newData.length) {
          let legendData = [];

          let xData = [];

          let seriesData = [];
          newData.forEach((val, index) => {
            legendData.push(val.curveName);
            let yData = [];

            xData = [];
            val.curveData.forEach((item) => {
              yData.push(item.y_value);

              xData.push(item.x_value);
            });

            let obj = {
              name: val.curveName,
              type: "line",
              smooth: true, //平滑曲线显示
              areaStyle: {
                color: ["#0CE1CC", "#EDDC3F", "#B366D5", "#AD3320"][index],
              },
              data: yData,
            };

            seriesData.push(obj);
          });

          this.options = {
            tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "cross",
                label: {
                  backgroundColor: "#6a7985",
                },
              },
            },

            legend: {
              top: 0,
              left: 12,
              itemGap: 12,
              itemWidth: 12,
              itemHeight: 12,
              icon: "rect",
              textStyle: {
                fontSize: 12,
                color: "#FFFFFF",
              },
              data: legendData,
            },
            grid: {
              left: "1%",
              right: "1%",
              bottom: "2%",
              top: "20%",
              containLabel: true,
            },
            xAxis: [
              {
                type: "category",
                boundaryGap: false,
                data: xData,
                axisLine: {
                  lineStyle: {
                    color: "#FFFFFF",
                  },
                },
                axisTick: {
                  //坐标轴刻度相关设置。
                  show: true,
                },
              },
            ],
            yAxis: [
              {
                type: "value",
                axisLine: {
                  lineStyle: {
                    color: "#FFFFFF",
                  },
                },
              },
            ],
            series: seriesData,
          };
          this.linechart();
        }
      },
      immediate: true,
      deep: true,
    },
  },

  methods: {
    linechart() {
      var chartDom = this.$refs["linechart"];
      var myChart = this.$echarts.init(chartDom);
      myChart.setOption(this.options);
    },
  },
};
</script>
